<template>
	<view class="mine">
		<view class="head">
			<view 
				class="head-status"
				style="height: 48px;width: 100%;">
			</view>
			<view class="head_content">
				<view class="admin_name">
					{{'欢迎您： ' + username}}
				</view>
			</view>
			<view class="head_bottom">
				{{'上次登陆：' + lastTime}}
			</view>
		</view>
		<view class="content">
			<view class="menuList" @click="toProjectGk">
				<view class="iconContainer">
					<u-icon
						name="order"
						color="#5c77ff"
						size="18px"
					></u-icon>
				</view>				
				<view class="textContainer">
					我创建的
					<view class="arrowContainer">
						<u-icon name="arrow-right" size="15px" color='#bcc0c8'></u-icon>
					</view>
				</view>
				
			</view>
			<view class="menuList" @click="toProjectWT">
				<view class="iconContainer">
					<u-icon
						name="question-circle"
						color="#5c77ff"
						size="18px"
					></u-icon>
				</view>
				<view class="textContainer">
					我的问题
					<view class="arrowContainer">
						<u-icon name="arrow-right" size="15px" color='#bcc0c8'></u-icon>
					</view>
				</view>
			</view>
			<view class="menuList" @click="toMyCollection">
				<view class="iconContainer">
					<u-icon
						name="star"
						color="#5c77ff"
						size="18px"
					></u-icon>
				</view>
				<view class="textContainer">
					我的收藏
					<view class="arrowContainer">
						<u-icon name="arrow-right" size="15px" color='#bcc0c8'></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="loginOut">
			<u-button type="error" @click="loginOut">退出登录</u-button>
		</view>
		<u-modal v-model="show" 
				@confirm="confirm" 
				ref="uModal" 
				:async-close="true" 
				show-cancel-button 
				:content-style="{
					textAlign:'center'
				}"
		>
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script> 
	import {_get_system_info} from "@/my_tools/tools.js"  
	export default {  //个人中心
		data() {
			return {
				username:'',
				system_info:{},
				scroll_top:0, //滚动条距离顶部的高度
				lastTime:uni.getStorageSync('lastTime'),
				show:false,
				content:'确认退出吗？'
			};
		},
		onPageScroll(e){
			this.scroll_top = e.scrollTop;
		},
		methods:{
			toProjectGk(){
				uni.navigateTo({
				    url: '/pages/project_gk/project_gk?creater=' + uni.getStorageSync('username'),
				});
			},
			toProjectWT(){
				uni.setStorage({
							key:'setName',
							data:uni.getStorageSync('username')
				})
				uni.setStorageSync('current', 2)
				uni.switchTab({
					url: '/pages/project_wt/project_wt' 
				})
			},
			toMyCollection(){
				uni.navigateTo({
				    url: `/pages/zcwj/zcwj?isCollection=${true}`,
				});
			},
			loginOut(){
				this.show = true;
			},
			confirm(){
				this.show = false;
				uni.showLoading({
					title: '正在退出'
				});
				this.$ajax({
					url:'/login',
					method:'DELETE',
					data:{
						ssid:uni.getStorageSync('token'),
					},
					success:res =>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},
					complete:() =>{
						uni.hideLoading()
					}
				})
			},
		},
		created(){
			this.system_info = _get_system_info(uni);
		},
		onShow() {
			this.username = uni.getStorageSync('nickName')
		}
	}
</script>

<style lang="scss" scoped>
.mine{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
	align-items: flex-start;
	// background-color: #ffffff;
	.head{
		width: 100vw;
		// background-image: url("https://project.src-code.com.cn:8685/api/wx0/image?f=mine.png");
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: center right;
		background-color: #5c77ff;
		color: #fff;
		height:fit-content;
		>div{
			width: 100vw;
		}
		.status_bar{
		}
		.head_content{
			height: 48px;
			width: 100%;
			padding-left:15px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: 15px;
			font-weight: bold;
		}
		.head_bottom{
			height: 48px;
			width: 100%;
			padding: 5px 15px;
			height:50px;
			font-size: 13px;
		}
	}
	.content{
		width: 100vw;
		margin-top: 10px;
		.menuList{
			padding: 5px 0 5px 15px;
			display: flex;
			align-items: center;
			height: 40px;
			background-color: #fff;
			.iconContainer{
				height: 100%;
			}
			.textContainer{
				height: 100%;
				width: 92vw;
				margin-left: 10px;
				position: relative;
				border-bottom: 0.5px solid rgba(236,236,236,.9);
				.arrowContainer{
					position: absolute;
					right: 3%;
					top: -1%;
				}
			}
		}
	}
	.loginOut{
		width: 100vw;
		position: absolute;
		bottom:20px;
		/deep/ .u-btn{
			border-radius: 0;
			border: none !important;
		}
	}
}
	u-modal{
		/deep/ .slot-content{
			height: 60px;
			line-height: 60px;
		}
	}
</style>
